<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>组件基础-通过 Prop 向子组件传递数据</title>
</head>
<body>


<div id="app">
	<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>
</div>

<script type="text/javascript">
	
// 定义一个名为 button-counter 的新组件

Vue.component('blog-post', {
  props: ['title','id'],
  template: ' <h3>{{ id }} -----{{ title }}</h3> '
  // component只允许一个父组件，以下方式显示会有误
  // template: ' <h2>{{ id }}</h2> -----<h3>{{ title }}</h3> '
})

var app=new Vue({
  el: '#app',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

</script>

</body>
</html>